<template>
  <span class="yun-input-tag" @dblclick="edit">
    <el-tag v-if="!input" v-bind="$attrs" @close="$emit('close')" disable-transitions>
      <span>
         {{ data }}
      </span>
    </el-tag>
    <el-input ref="input" v-model="data" class="yun-input-tag-input" v-else @blur="editFinish"/>
  </span>
</template>
<script>
export default {
  name: "InputTag",
  props: {
    value: {
      required: true
    }
  },
  data() {
    return {
      input: false,
      data: null
    }
  },
  methods: {
    edit() {
      this.input = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    editFinish() {
      if (this._events.blur) {
        this.$emit("blur", this.data,(result)=>{
          if (result){
            this.input = false
            this.$emit("input", this.data)
          }
        })
      }else{
        this.input = false
        this.$emit("input", this.data)
      }

    }
  },
  watch: {
    value: {
      handler(v) {
        this.data = v
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.yun-input-tag {
  cursor: pointer;
}

.yun-input-tag-input {
  width: 80px;
}
</style>
